<template>
  <h1 style="width: 100%;text-align: center;margin-bottom: 30px">SpuForm</h1>
  <el-form label-width="100px">
    <el-form-item label="SPU名称">
      <el-input type="text" placeholder="SPU名称"/>
    </el-form-item>
    <el-form-item label="品牌">
      <el-select placeholder="请选择品牌">
<!--        value需要发送请求获取-->
        <el-option v-for="item in tmList" :key="item.id" :value="item.id">{{item.tmName}}</el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input type="textarea" rows="4"/>
    </el-form-item>
    <el-form-item label="SPU图片">
      <el-upload
        v-model:file-list="fileList"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-select placeholder="请选择">
        <el-option
          v-for="item in saleAttrList"
          :key="item.id"
          :value="item.id"
        >
          {{item.name}}
        </el-option>
      </el-select>
      <el-button type="primary" icon="ele-Plus">添加销售属性</el-button>
      <el-table border stripe style="margin-top: 20px">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="属性名"></el-table-column>
        <el-table-column label="属性值名称列表"></el-table-column>
        <el-table-column label="操作"></el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="">保存</el-button>
      <el-button type="default" @click="emit('setState',0)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'SpuForm',
});
</script>
<script setup lang="ts">
import {ref} from 'vue'
import { Plus } from "@element-plus/icons";
import { ElMessage, type UploadProps, type UploadUserFile } from "element-plus";
import type {TmListType} from '@/api/tradmark';
import type {BaseSaleAttrListType,SpuSaleAttrListType,SpuImgListType,SpuInfoType} from '@/api/spu';
import {requestBaseSaleAttrList,requestSpuImgList,requestSpuSaleAttrList} from '@/api/spu';
import {requestAllTmList} from '@/api/tradmark';
//接收spu组件传来的参数
const props = defineProps<{
  spuInfo:SpuInfoType
}>()
//接收自定义事件用来切换组件
const emit = defineEmits<{
  (event:'setState',state:number,row?:SpuInfoType):null
}>()

//Spu照片墙的逻辑
const fileList = ref<UploadUserFile[]>([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
]);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
//根据新增还是修改，来判断需要请求那些数据，当需要新增的时候发送的请求:1.品牌列表2.所有销售属性列表
//当需要修改的时候发送的请求：1.品牌列表2.所有销售属性列表3.当前spu图片列表4.当前spu的属性列表
const tmList =ref<TmListType[]>([])
const saleAttrList = ref<BaseSaleAttrListType>([]);
const spuImageList = ref<SpuImgListType>([]);
const spuSaleAttrList = ref<SpuSaleAttrListType>([]);

//创建获取所有数据的请求
const getAllUseDate = async () => {
//  通过判断传过来的spuInfo中是否存在Id，来判断是修改还是添加
 if (!props.spuInfo.id){
   try {
   //  如果不存在,那么就只执行新增需要获取的数据
     const re1 = await requestAllTmList()
     const re2 = await requestBaseSaleAttrList()
     tmList.value = re1
     saleAttrList.value = re2
   }catch (e){
     ElMessage.error('获取品牌或者属性数据列表失败')
   }
 }else {
   const promise1 = requestAllTmList();
   const promise2 = requestBaseSaleAttrList();
   const promise3 = requestSpuImgList(props.spuInfo.id);
   const promise4 = requestSpuSaleAttrList(props.spuInfo.id);
   try {
     const result = await Promise.all([
       promise1,
       promise2,
       promise3,
       promise4,
     ]);
     tmList.value = result[0];
     saleAttrList.value = result[1];
     spuImageList.value = result[2];
     spuSaleAttrList.value = result[3];
   } catch (e) {
     ElMessage.error("初始请求失败");
   }
 }
}
getAllUseDate()
</script>

<style scoped>

</style>